<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <el-form-item label="手机号">
                    <el-input v-model="searchForm.keyword" placeholder="请输入手机号搜索" clearable @clear="reload"></el-input>
                </el-form-item>
                <el-form-item label="配送状态">
                    <el-select v-model="searchForm.delivery_status" placeholder="请选择" clearable @clear="reload">
                        <el-option label="配送中" value="20">
                        </el-option>
                        <el-option label="空闲" value="10">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="reload">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" size="small" icon="el-icon-plus" @click="addDriver()">新增</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px' }">
            <div class="link">
                <el-link :href="downloadUrl" target="_blank" type="primary">司机端App下载链接：{{ downloadUrl }}</el-link>
                <em class="copy" @click="copyEv()">复制</em>
            </div>
            <el-table v-loading="isLoading" size="small" header-cell-class-name="table_header_cell" :data="list"
                class="table-mt">
                <!-- <el-table-column prop="driver_id" label="ID">
                </el-table-column> -->
                <el-table-column prop="xuhao" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="car_no" label="车牌号">
                    <template slot-scope="scope">
                        <el-tag size="mini">{{ scope.row.car_no }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="volume" label="车辆容积">
                </el-table-column>
                <el-table-column prop="car_capacity" label="车辆载重(kg)">
                </el-table-column>
                <el-table-column prop="contact" label="联系人">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column prop="account" label="登录手机号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.account }} <el-tag type="success" size="mini" class="tag"
                                @click="resetPwd(scope.row.driver_id)">重置密码</el-tag></span>
                    </template>
                </el-table-column>
                <el-table-column prop="completedNum" label="已完成单量">
                </el-table-column>
                <el-table-column prop="deliveryNum" label="配送中单量">
                </el-table-column>
                <el-table-column prop="orderCountTotal" label="接单量">
                </el-table-column>
                <el-table-column prop="delivery_status" label="配送状态">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.delivery_status == 20" size="mini">配送中</el-tag>
                        <el-tag type="info" v-if="scope.row.delivery_status == 10" size="mini">空闲</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="启用">
                    <template slot-scope="scope">
                        <el-switch :active-value="1" :inactive-value="2" v-model="scope.row.status"
                            @change="setStatus(scope.row.driver_id, $event)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="160px">
                    <template slot-scope="scope">
                        <div class="handle-con">
                            <span @click="editDriver(scope.row.driver_id)">编辑</span>
                            <el-divider direction="vertical"></el-divider>
                            <el-dropdown size="small" trigger="click" @command="handleCommand(scope.row, $event)">
                                <span class="el-dropdown-link">
                                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="contract">合同管理</el-dropdown-item>
                                    <el-dropdown-item command="destroy">注销</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <!-- <el-button type="text" @click="editDriver(scope.row.driver_id)">编辑</el-button>
                        <el-dropdown size="small" trigger="click" @command="handleCommand(scope.row.id,$event)">
                            <span class="el-dropdown-link">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="contract">合同管理</el-dropdown-item>
                                <el-dropdown-item command="destroy">注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown> -->
                        <!-- <el-button type="text" @click="toSettingPage(scope.row)">合同管理</el-button> -->
                    </template>
                </el-table-column>
                <div slot="empty" class="empty">
                    <el-empty description="暂无数据" />
                </div>
            </el-table>
            <pagination v-if="total" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.limits"
                @pagination="getList" />
        </el-card>
        <add-driver ref="driverDom" @reload="getList"></add-driver>
        <edit-pwd ref="editPwd"></edit-pwd>
    </div>
</template>
<script>
import { driverList, detailDriver, setDriverStatus, destroyDriver } from "@/api/driver.js";
import addDriver from './components/addDriver.vue'
import editPwd from './components/editPwd.vue'
import { getSettingByKey } from '@/api/setting';
export default {
    components: { addDriver, editPwd },
    data() {
        return {
            searchForm: {
                keyword: '',
                delivery_status: '',
                page: 1,
                limits: 15,
            },
            isLoading: false,
            total: 0,
            list: [],
            downloadUrl: ''
        }
    },
    created() {
        this.isLoading = true;
        this.getList()
        this.getDriverLink()
    },
    methods: {
        copyEv() {
            navigator.clipboard
                .writeText(this.downloadUrl)
                .then(() => {
                    this.$message.success("复制成功");
                })
                .catch((err) => {
                    // 复制失败
                    console.error("复制失败");
                });
        },
        reload() {
            this.isLoading = true;
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        addDriver() {
            this.$refs.driverDom.title = '添加司机'
            this.$refs.driverDom.add();
        },
        editDriver(id) {
            this.$refs.driverDom.add();
            this.$refs.driverDom.ruleForm.driver_id = id;
            this.$refs.driverDom.title = '编辑司机信息'
            detailDriver({
                driver_id: id
            }).then(res => {
                if (res.code == 0) {
                    this.$refs.driverDom.ruleForm.card_no = res.data.card_no;
                    this.$refs.driverDom.ruleForm.contact = res.data.contact;
                    this.$refs.driverDom.ruleForm.phone = res.data.phone;
                    this.$refs.driverDom.ruleForm.car_no = res.data.car_no;
                    this.$refs.driverDom.ruleForm.volume = res.data.volume;
                    this.$refs.driverDom.ruleForm.car_capacity = res.data.car_capacity;
                    this.$refs.driverDom.ruleForm.account = res.data.account;
                }
            })
        },
        handleCommand(row, e) {
            console.log('e', e);
            switch (e) {
                case "contract":
                    this.toSettingPage(row)
                    break;
                case "destroy":
                    this.destroyDriver(row)
                    break;
            }
        },
        destroyDriver(row) {
            this.$confirm("您确定要注销该司机吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    destroyDriver({
                        driver_id: row.driver_id
                    }).then(res => {
                        if (res.code == 0) {
                            this.$message.success(res.msg)
                            this.getList()
                        }
                    })
                })
                .catch(() => { });

        },
        toSettingPage(row) {
            this.$router.push(`/driver/contract/list/${row.driver_id}`)
        },
        resetPwd(id) {
            this.$refs.editPwd.add();
            this.$refs.editPwd.ruleForm.driver_id = id;
        },
        setStatus(id, e) {
            setDriverStatus({
                driver_id: id,
                state: e
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.msg)
                }
            })
        },

        getList() {
            driverList(this.searchForm).then(res => {
                console.log('res', res)
                this.isLoading = false;
                if (res.code == 0) {
                    this.list = res.data.data;
                    this.total = res.data.total;
                }
            })
        },
        getDriverLink() {
            getSettingByKey({
                keys: 'appVersion'
            }).then(res => {
                if (res.code == 0) {
                    this.downloadUrl = res.data.values.downloadUrl
                }
            })
        },
    }
}
</script>
<style scoped>
.tag {
    cursor: pointer;
}

.link {
    display: flex;
    align-items: center;
}

.copy {
    color: #67c23a;
    font-style: normal;
    padding-left: 10px;
    cursor: pointer;
}

/deep/ .el-divider {
    background-color: var(--main-color);
    opacity: 0.5;
    position: relative;
    top: 2px;
}

/deep/ .el-dropdown {
    font-size: 12px;
    color: var(--main-color);
}

.handle-con {
    color: var(--main-color);
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

.handle-con span {
    cursor: pointer;
}

.invoice {
    cursor: pointer;
}
</style>